<template>

    <el-skeleton :loading="loading" animated :count="10">
        <template #template>
            <div class="item_mv">
                <el-skeleton-item class="ske-img" variant="h3" />
                <div class="ske-info">
                    <el-skeleton-item variant="h3" class="ske-name" />
                    <el-skeleton-item variant="text" class="ske-txt" style="width:50%" />
                    <el-skeleton-item variant="text" class="ske-txt" />
                </div>
            </div>
        </template>
        <template #default>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane :label="item.area_name" :name="item.area_name" v-for="item in areaList">
                    <div class='mv'>
                        <div class="item_mv" :key="'' + item.id + index" v-for="(item, index) in mvList">
                            <router-link :to="{ path: '/mvlist/mv', query: { id: item.id }}" class="faceImg_mv">
                                <!-- <a href="#" class="faceImg_mv"> -->
                                <el-icon class="icon-video-play">
                                    <VideoPlay />
                                </el-icon>
                                <el-image :src="item.cover || item.imgurl">
                                    <div slot="placeholder" class="image-slot">
                                        <i class="iconfont icon-placeholder"></i>
                                    </div>
                                </el-image>
                                <!-- </a> -->
                            </router-link>
                            <div class="info">
                                <router-link :to="{ path: '/mvlist/mv', query: { id: item.id }}" class="mv-name">
                                    {{item.name}}
                                </router-link>
                                <router-link :to="{ path: '/singer', query: { id: item.artistId }}" class="mv-author"
                                    v-if="!item.publishTime">{{item.artistName}}</router-link>
                                <div class="mv-playCount">
                                    <el-icon class="icon-mvlist">
                                        <VideoCameraFilled />
                                    </el-icon>
                                    {{$utils.formartNum(item.playCount)}}
                                </div>
                                <div class="mv-time" v-if="item.publishTime">发布时间：{{item.publishTime}}</div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </template>
    </el-skeleton>
</template>

<script>
import { getNewMv } from '@apis/http'
import { ElNotification } from 'element-plus'

export default {
    data() {
        return {
            areaList: [
                {
                    "area_name": "全部",
                },
                {
                    "area_name": "内地",
                },
                {
                    "area_name": "港台",
                },
                {
                    "area_name": "欧美",
                },
                {
                    "area_name": "日本",
                },
                {
                    "area_name": "韩国",
                }
            ],
            mvList: [],
            activeName: '',//默认打开第一个标签
            loading: ''
        };
    },
    methods: {
        handleClick(tab, event) {
            //获取tabs切换时的name
            let beforeTabId = event.target.getAttribute('id');
            let name = beforeTabId.split('-')[1];
            // console.log(name);
            getNewMv({
                limit: 10,
                area: name === "全部" ? "" : name
            }).then(res => {
                // console.log(JSON.stringify(res.data));
                if (res.code === 200) {
                    this.mvList = res.data;
                } else {
                    ElNotification({
                        type: 'error',
                        title: '提示',
                        message: '接口请求错误，请查看getNewMv()接口',
                    })
                }
            })
        },
    },
    created: function () {
        getNewMv({
            limit: 10,
        }).then(res => {
            // console.log(JSON.stringify(res.data));
            if (res.code === 200) {
                this.mvList = res.data;
                //默认打开第一个标签
                this.activeName = this.areaList[0].area_name;
                this.loading = false;
            } else {
                ElNotification({
                    type: 'error',
                    title: '提示',
                    message: '接口请求错误，请查看getNewMv()接口',
                })
            }
        }).catch(res => {
            // ElNotification({
            //     type: 'error',
            //     duration: 0,
            //     title: '提示',
            //     message: res.message + ",url=" + res.config.url,
            // })
            this.activeName = this.areaList[0].area_name;
            this.loading = false;
            this.mvList = [
                {
                    "id": 14561427,
                    "cover": "http://p1.music.126.net/cbf1kg15V6sqHN8QoVLq7g==/109951167848433546.jpg",
                    "name": "她们的名字",
                    "playCount": 93238,
                    "briefDesc": null,
                    "desc": null,
                    "artistName": "袁娅维TIA RAY",
                    "artistId": 10473,
                    "duration": 0,
                    "mark": 0,
                    "subed": false,
                    "artists": [
                        {
                            "id": 10473,
                            "name": "袁娅维TIA RAY"
                        }
                    ],
                    "alias": [
                        "电视剧《她们的名字》片尾曲"
                    ]
                },
                {
                    "id": 14559050,
                    "cover": "http://p1.music.126.net/fOEDnvH_YpU9k3QN6kbQOw==/109951167815032560.jpg",
                    "name": "你不是一个人",
                    "playCount": 422938,
                    "briefDesc": null,
                    "desc": null,
                    "artistName": "张信哲",
                    "artistId": 6454,
                    "duration": 0,
                    "mark": 0,
                    "subed": false,
                    "artists": [
                        {
                            "id": 6454,
                            "name": "张信哲"
                        },
                        {
                            "id": 5781,
                            "name": "薛之谦"
                        }
                    ]
                },
                {
                    "id": 14558895,
                    "cover": "http://p1.music.126.net/s3CW--s9zoON0_8m4eowNA==/109951167811753458.jpg",
                    "name": "可梦",
                    "playCount": 221046,
                    "briefDesc": null,
                    "desc": null,
                    "artistName": "周深",
                    "artistId": 1030001,
                    "duration": 0,
                    "mark": 0,
                    "subed": false,
                    "artists": [
                        {
                            "id": 1030001,
                            "name": "周深"
                        }
                    ],
                    "alias": [
                        "宝可梦25周年曲"
                    ]
                },
                {
                    "id": 14553438,
                    "cover": "http://p1.music.126.net/yOEYdkt6eDXuLQnRzTSEzQ==/109951167773656233.jpg",
                    "name": "没完没了",
                    "playCount": 99591,
                    "briefDesc": null,
                    "desc": null,
                    "artistName": "PSY.P",
                    "artistId": 29303235,
                    "duration": 0,
                    "mark": 0,
                    "subed": false,
                    "artists": [
                        {
                            "id": 29303235,
                            "name": "PSY.P"
                        }
                    ]
                },
                {
                    "id": 14548213,
                    "cover": "http://p1.music.126.net/kotkCB9vFgutvQIXiS-zzQ==/109951167733445767.jpg",
                    "name": "小河淌水1952",
                    "playCount": 471431,
                    "briefDesc": null,
                    "desc": null,
                    "artistName": "法老",
                    "artistId": 865007,
                    "duration": 0,
                    "mark": 0,
                    "subed": false,
                    "artists": [
                        {
                            "id": 865007,
                            "name": "法老"
                        },
                        {
                            "id": 7785,
                            "name": "龚琳娜"
                        }
                    ]
                },
                {
                    "id": 14547896,
                    "cover": "http://p1.music.126.net/eWzUoVf2upDFZ1tekawSrg==/109951167724433047.jpg",
                    "name": "Cruel",
                    "playCount": 418389,
                    "briefDesc": null,
                    "desc": null,
                    "artistName": "王嘉尔",
                    "artistId": 1083118,
                    "duration": 0,
                    "mark": 0,
                    "subed": false,
                    "artists": [
                        {
                            "id": 1083118,
                            "name": "王嘉尔"
                        }
                    ]
                },
                {
                    "id": 14276994,
                    "cover": "http://p1.music.126.net/Y1ruXHVOLZoxDhflAdzojw==/109951165849915097.jpg",
                    "name": "手术刀 Scalpel",
                    "playCount": 3215825,
                    "briefDesc": null,
                    "desc": null,
                    "artistName": "Melo",
                    "artistId": 29304235,
                    "duration": 0,
                    "mark": 0,
                    "subed": false,
                    "artists": [
                        {
                            "id": 29304235,
                            "name": "Melo"
                        }
                    ]
                },
                {
                    "id": 14246517,
                    "cover": "http://p1.music.126.net/fTIRod-Lpl4Tt0p96kfZsw==/109951165697648513.jpg",
                    "name": "田",
                    "playCount": 1018702,
                    "briefDesc": null,
                    "desc": null,
                    "artistName": "田馥甄",
                    "artistId": 9548,
                    "duration": 0,
                    "mark": 0,
                    "subed": false,
                    "artists": [
                        {
                            "id": 9548,
                            "name": "田馥甄"
                        }
                    ]
                },
                {
                    "id": 14215257,
                    "cover": "http://p1.music.126.net/4_94IGzvAbm07_x_6oCjZg==/109951165559533061.jpg",
                    "name": "我们的罗曼史",
                    "playCount": 1215964,
                    "briefDesc": null,
                    "desc": null,
                    "artistName": "苏婉",
                    "artistId": 46371398,
                    "duration": 0,
                    "mark": 0,
                    "subed": false,
                    "artists": [
                        {
                            "id": 46371398,
                            "name": "苏婉"
                        },
                        {
                            "id": 46372384,
                            "name": "吕书君"
                        }
                    ]
                },
                {
                    "id": 14212561,
                    "cover": "http://p1.music.126.net/wRzS7TbR95LdLTdDQ5T2hA==/109951165547651915.jpg",
                    "name": "过",
                    "playCount": 6657453,
                    "briefDesc": null,
                    "desc": null,
                    "artistName": "王嘉尔",
                    "artistId": 1083118,
                    "duration": 0,
                    "mark": 0,
                    "subed": false,
                    "artists": [
                        {
                            "id": 1083118,
                            "name": "王嘉尔"
                        },
                        {
                            "id": 3684,
                            "name": "林俊杰"
                        }
                    ]
                }
            ]
        })
    }
}
</script>

<style scoped lang="less">
.mv {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
    margin: 0 -10px;
    font-size: 0;

    .item_mv {
        flex: 30%;
        max-width: calc(120% / 6 - 20px);
        margin: 20px 10px 0;
        border-radius: 4px;

        &:hover {
            .el-image {
                transform: scale(1.1);
            }

            .icon-video-play {
                opacity: 1;
                transform: scale(1);
            }
        }
    }

    .faceImg_mv {
        display: block;
        position: relative;
        width: 100%;
        height: 123px;
        overflow: hidden;

    }

    .icon-video-play {
        margin: auto;
        position: absolute;
        top: 50%;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;
        margin-top: -30px;
        font-size: 60px;
        text-align: center;
        color: #fff;
        opacity: 0;
        transform: scale(.5);
        transition: all .4s linear;
        text-shadow: 2px 2px 10px #000;
    }

    .el-image {
        background-color: #f5f7fa;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        z-index: 2;
        transition: all .4s linear;

        :deep(img) {
            width: auto;
        }
    }

    .info {
        position: relative;
        padding: 15px 0;

        .mv-name {
            display: block;
            font-size: 14px;
            text-overflow: ellipsis;
            height: 20px;
            overflow: hidden;
            white-space: nowrap;
        }

        .mv-author,
        .mv-playCount,
        .mv-time {
            display: block;
            line-height: 24px;
            font-size: 14px;
            color: #999;
        }

        .icon-video {
            font-size: 24px;
            color: #999;
            vertical-align: top;
        }
    }
}

.el-skeleton {
    display: flex;
    width: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
    margin: 0 -10px;
    font-size: 0;

    .item_mv {
        flex: 30%;
        max-width: calc(100% / 5 - 20px);
        margin: 20px 10px 0;
        border-radius: 4px;
    }

    .ske-img {
        display: block;
        position: relative;
        width: 100%;
        height: 123px;
        overflow: hidden;
    }

    .ske-info {
        position: relative;
        padding: 15px 0;
    }

    .ske-name {
        display: block;
        margin: 0 0 6px;
        line-height: 14px;
        height: 14px;
    }

    .ske-txt {
        display: block;
        margin: 0 0 8px 0;
        line-height: 16px;
        width: 10%;
    }
}
</style>